import React from "react";
import styles from "./index.module.less";
import Mbottom from "@components/mBottom";
import { NavLink, Outlet } from "react-router-dom";

const cateList = [
    { name: "宝贝推荐", path: "/goodsRecommend" },
    { name: "电子产品", path: "/electronics" },
    { name: "家用电器", path: "/homeAppliances" },
    { name: "办公用品", path: "/officeSupplies" },
    { name: "学习用品", path: "/schoolThings" },
    { name: "穿搭相关", path: "/wearMatch" },
    { name: "零食百货", path: "/snackDepartment" },
];
const Mmall = () => {
    return (
        <div className={styles.mall}>
            <p className={styles.p1}>宝库</p>
            <div className={styles.search_wrap}>
                <input
                    type="text"
                    placeholder="找宝贝"
                    className={styles.edit_inp}
                />
                <input
                    type="button"
                    defaultValue="搜索"
                    className={styles.search_inp}
                />
            </div>
            <div className={styles.tab_wrap}>
                <ul className={styles.mall_ul}>
                    {cateList.map((item, index) => {
                        return (
                            <li key={index}>
                                <NavLink
                                    to={`/m/mall${item.path}`}
                                    className={({ isActive }) =>
                                        isActive ? styles.active : undefined
                                    }
                                >
                                    {item.name}
                                </NavLink>
                            </li>
                        );
                    })}
                </ul>
            </div>
            <div className={styles.mall_show}>
                <Outlet />
            </div>
            <Mbottom />
        </div>
    );
};

export default Mmall;
